<template>
  <div>
    <el-card>
      <div>
        <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
          <el-form-item label="应用名称">
            <el-input v-model="form.tenantName"></el-input>
          </el-form-item>
          <el-form-item label="开发工程名称" label-width="100px">
            <el-input v-model="form.tenantCode"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="mb-1" icon="el-icon-search" size="middle" @click="getList">
              查询
            </el-button>
            <el-button type="primary" class="mb-15" icon="el-icon-refresh" size="middle" @click="onRefresh">
              重置
            </el-button>
            <el-button type="primary" class="mb-15" icon="el-icon-plus" size="middle" @click="changeDialogStatus(true)">
              新增应用
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" border style="width: 100%;" height="calc(100vh - 220px)">
        <el-table-column prop="id" label="编号" width="150" show-overflow-tooltip="">
        </el-table-column>
        <el-table-column prop="applicationNameZh" label="应用名称" width="200">
        </el-table-column>
        <el-table-column prop="applicationName" label="开发工程名称" width="200">
        </el-table-column>
        <el-table-column prop="interfaceSyncUrl" label="接口同步地址"></el-table-column>
        <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="syncAppInterface(scope.row)" type="text" size="small">同步接口</el-button>
            <el-button @click="editAppItem(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="deleteAppItem(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 25px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.pageNo" :page-sizes="[10, 20, 50]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-card>
    <application-info-comp :isShow="isShowDialog" :item="appItem" @changeDialogStatus="changeDialogStatus" />
    <el-dialog title="提示" :visible.sync="isShowDelete" width="30%">
      <span>该操作将会删除该应用信息，确定是否进行删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDelete = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  
<script>
import ApplicationInfoComp from './components/applicationinfocomp.vue'
import { getApplicationPage, deleteApplication, syncApplicationInterface } from "@/api/application";
export default {
  components: {
    ApplicationInfoComp
  },
  data () {
    return {
      form: {
        fileName: '',
        transStatus: ''
      },
      params: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      tableData: [],
      isShowDialog: false,
      appItem: undefined,
      isShowDelete: false
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      const param = { ...this.params, ...this.form }
      getApplicationPage(param).then((res) => {
        if (res.status === 200) {
          this.tableData = res.data.records;
          this.total = res.data.total
        } else {
          this.$message(res.message);
        }
      });
    },
    handleSizeChange (row) {
      this.params.pageSize = row
      this.params.pageNo = 1
      this.getList()
    },
    handleCurrentChange (row) {
      this.params.pageNo = row
      this.getList()
    },
    changeDialogStatus (status) {
      if (status === "success") {
        this.isShowDialog = false
        this.getList()
      } else {
        this.appItem = undefined
        this.isShowDialog = status
      }
    },
    editAppItem (row) {
      this.appItem = row
      this.isShowDialog = true
    },
    deleteAppItem (row) {
      this.appItem = row
      this.isShowDelete = true
    },
    confirmDelete () {
      const param = { id: this.appItem.id }
      deleteApplication(param).then((res) => {
        this.isShowDelete = false
        this.getList()
        if (res.status === 200) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败，请重试");
        }
      });
    },
    syncAppInterface (row) {
      const params = { interfaceSyncUrl: row.interfaceSyncUrl, applicationName: row.applicationName, applicationId: row.id }
      syncApplicationInterface(params).then((res) => {
        if (res.status === 200) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败，请重试");
        }
      });
    }
  },
}
  </script>